<script setup>
  import { onMounted, ref } from 'vue';
  import { getCtDetail, getSignUrl, checkAuthStatus } from '@/api/home'
  import { showDialog } from 'vant';
  import 'vant/es/dialog/style';

  import { removeToken } from '@/utils/auth'

  const userinfo = ref({})

  onMounted(() => {
    init()
    getCt()
  })

  const ctId = ref('')
  const itemId = ref('')
  const init = () => {
    userinfo.value = JSON.parse(sessionStorage.getItem('userinfo'))
    ctId.value = sessionStorage.getItem('ct_id')
    itemId.value = sessionStorage.getItem('item_id')
  }

  // 获取合同信息
  const contract = ref({})
  const errText = ref('数据异常')
  const pageLoading = ref(true)
  const getCt = () => {
    getCtDetail(ctId.value).then(res => {
      contract.value = res.data
      pageLoading.value = false
    }).catch(err => {
      errText.value = err.msg
      pageLoading.value = false
    })
  }

  const handleSign = () => {
    checkAuth()
  }

  // 检测账号实名状态
  const checkAuth = () => {
    checkAuthStatus().then(res => {
      const { auth_status, auth_url } = res.data
      if (auth_status == 1) {
        getSign()
      } else {
        showDialog({
          title: '实名提示',
          message: '您的账号还未进行实名验证,请前往实名',
        }).then(() => {
          window.location.href = auth_url
        })
      }
    })
  }

  // 获取签约地址
  const jumpLoading = ref(false)
  const getSign = () => {
    const data = {
      ct_id: ctId.value
    }
    jumpLoading.value = true
    getSignUrl(data).then(res => {
      const { sign_url } = res.data
      window.location.href = sign_url
      setTimeout(() => {
        jumpLoading.value = false
      }, 2000);
    }).catch(err => {
      jumpLoading.value = false
    })
  }

  // 退出登录
  const handleLogout = () => {
    removeToken()
    window.location.reload()
  }
  
</script>

<template>
  <div v-if="!pageLoading">
    <div class="image-container" v-if="Object.values(contract).length">
      <img :src="contract.image_url" />
    </div>
    <div v-else>
      <van-empty image="error" :description="errText">
        <van-button 
          type="primary" 
          round 
          @click="handleLogout"
          style="width: 200px"
      >退出</van-button>
      </van-empty>
    </div>
  </div>
  <div v-else class="loading-container">
    <van-loading size="24px">加载中...</van-loading>
  </div>

  <!-- 去签约按钮 -->
  <div class="footer-container" v-if="Object.values(contract).length">
    <van-button 
      type="primary" 
      round 
      block 
      color="linear-gradient(to right, rgb(108 179 251), #1989fa)"
      class="submit-button"
      @click="handleSign"
      :loading="jumpLoading"
      loading-text="跳转中..."
    >去签约</van-button>
  </div>
</template>

<style scoped>
  .footer-container {
    width: 80%;
    position: fixed;
    z-index: 99;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
  }
  .image-container {
    padding: 10px;
  }
  .image-container img{
    width: 100%; 
  }
  .loading-container {
    text-align: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 1024px) {
    .image-container {
      width: 800px;
      margin: 0 auto;
    }
    .image-container img{
      width: 800px;
    }
    .footer-container {
      width: 300px;
      bottom: 50px;
    }
  }
</style>